<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/head::head('组卷系统后台 | 用户管理')"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!--Main Header -->
    <div th:replace="/include/back_header::header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="/include/back_sidebar::sidebar"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                基本信息表
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active"><img src=""></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>邮箱</th>
                                    <th>最后登陆时间</th>
                                    <th>用户状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="user,memberStat:${userResult.userList}">
                                    <td th:text="${user.userName}"></td>
                                    <td th:text="${user.userEmail}"></td>
                                    <td th:text="${user.newLoginTime}"></td>
                                    <td th:text="${user.newStatus}"></td>
                                    <td class="col-operate">
                                        <button type="button" class="btn btn-modify btn-warning btn-sm"
                                                data-toggle="modal"
                                            data-target="#modal-default" th:onclick="modify([[${user.userId}]],[[${user.userName}]],
                                            [[${user.userEmail}]],[[${user.userPassword}]],[[${user.newStatus}]],[[${user.userProfile}]]
                                            ,[[${user.newLoginTime}]])">修改
                                        </button>
                                        <button type="button" class="btn btn-delete btn-danger btn-sm"
                                                th:onclick="deleteUser(this,[[${user.userId}]],[[${user.userName}]])">删除</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                    <!--modal-->
                    <div class="modal fade" id="modal-default">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">查看&&修改用户信息</h4>
                                </div>
                                <form role="form" th:action="@{/user-modify}" method="post">
                                    <div class="modal-body">
                                        <table style="width: 100%">
                                            <tbody>
                                            <tr id="trId">
                                                <td width="20%">用户编号:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="userId" id="userId" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">用户名:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="userName" id="userName" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">用户状态:</td>
                                                <td width="80%">
                                                    <select id="userStatus" name="userStatus"
                                                            class="form-control">
                                                        <option th:each="dic,memberStat:${userResult.dictionaryList}"
                                                                th:value="${dic.dicId}"
                                                                th:text="${dic.dicValue}"></option>
                                                    </select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td width="20%">用户邮箱:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="userEmail"
                                                                       id="userEmail" placeholder="填写用户邮箱">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">用户密码:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="userPassword"
                                                                       id="userPassword" placeholder="重设用户密码">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">最后登录时间:</td>
                                                <td width="80%"><input type="text" class="form-control" name="userLoginTime"
                                                                       id="userLoginTime" readonly="readonly">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">用户简介:</td>
                                                <td width="80%"><textarea class="form-control"
                                                                       name="userProfile"
                                                                          id="userProfile" style="height: 150px" placeholder="填写用户简介"></textarea>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                            Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">提交修改</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Main Footer -->
    <div th:replace="/include/back_footer::footer"></div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<div th:replace="include/javascript::javascript"></div>
<!-- page script -->
<script th:inline="javascript">
    $(function () {
        $("#trId").hide();
        $("#user-branch").addClass("active");
        $('#example').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'bAutoWidth': false,
            'info': true,
            'autoWidth': false,
            'aLengthMenu':[7,10,20]
        });
    });

    function deleteUser(obj,id,name){
        var table = $("#example").DataTable();
        var row = table.row($(obj).parents('tr'));
        layer.confirm('确定删除【 ' + name + "】", {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "POST",
                url: "/user-delete",
                data: {id: id},
                dataType: "json",
                success: function (msg) {
                    if(msg["ok"]){
                        layer.msg("操作成功", {time: 700}, function () {
                            //  window.location.reload();
                            row.remove().draw();
                        });
                    }else {
                        layer.msg("删除失败");
                    }
                }
            });
            layer.close(index);
        });
    };
    function modify(id,name,email,password,status,profile,loginTime) {
        $("#userId").val(id);
        $("#userEmail").val(email);
        $("#userName").val(name);
        $("#userLoginTime").val(loginTime);
        $("#userProfile").val(profile);
        var typeSelect = $("#userStatus").find("option");
        var type;
        for (var i = 0; i < typeSelect.length; i++) {
            type = typeSelect.eq(i).text();
            if (status == type) {
                type = typeSelect.eq(i).val();
                break;
            }
        }
        $("#userStatus").val(type);
    };

    $(".sidebar-menu li").click(function (e) {
        $(".sidebar-menu li").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>